<template>
	<view class="mx-member-course-card" @tap="onTap">
		<text class="course-title">{{courseName}} </text>
		<view class="course-progress">
			<text>课程进度：</text>
			<MxCourseProgress :total="course.lessons" :completed="course.completed_lessons_length" />
		</view>
		<view class="course-time">
			<text>上课时间：</text>
			<text>{{classTime}} </text>
		</view>
		<view class="course-location">
			<text>上课地点：</text>
			<text>{{classPlace}}</text>
		</view>
		<view class="course-coach" v-if="!coach">
			<text>教练：</text>
			<view class="caochs">
				<view class="caoch-info" v-for="coach in course.course.coachs">
					<view class="caoch-img" :style="{backgroundImage: `url(${coachAvatar(coach)})`}"></view>
					<text class="caoch-name">{{coach.name}}</text>
				</view>
			</view>
		</view>
		<view class="member-number"  v-if="coach">
			<text>学员人数：</text>
			<text>{{course.student_num}}</text>
		</view>
	</view>
</template>

<script>
	import {imgUrl} from '@/utils/config.js'
	import MxCourseProgress from '@/components/mine/member-course/MxCourseProgress.vue';
	export default {
		name:"MxMemberCourseCard",
		props: {
			course:{},
			// 是否为教练课程
			coach: {
				type: Boolean,
				default: false
			}
		},
		components: {
			MxCourseProgress
		},
		data() {
			return {
				caochImg: '/static/imgs/mx-logo.jpg'
			};
		},
		computed: {
			classTime() {
				return this.course.latest_lesson?.class_time ? this.course.latest_lesson.class_date + ' ' + this.course.latest_lesson.class_time: this.course.class_time
			},
			
			classPlace() {
				return this.course.latest_lesson?.class_place ?? this.course.class_place
			},
			
			courseName() {
				return this.course.course_name ?? this.course.name
			}
		},
		methods: {
			onTap() {
				if(this.coach) {
					this.$emit('select', this.course.course_id)
					return
				}
				
				
				const orderId = this.course.order_id
				const { course_name, latest_lesson, opening_date, class_time, course } = this.course
				let courseTime = latest_lesson ? latest_lesson.class_date + ' ' + latest_lesson.class_time: opening_date.split('~')[0] + ' ' + class_time.split('-')[0]
				const coachsName = course.coachs.map(coach => {
					return coach.name
				}).join('、')
				uni.navigateTo({
					url: `/pages/mine/member-course-code?orderId=${orderId}&courseName=${course_name}&courseTime=${courseTime}&courseCoach=${coachsName}`
				})
			},
			
			coachAvatar(coach) {
				return imgUrl + coach.image?.file_path
			}
		}
	}
</script>

<style scoped lang="scss">
@import '@/common/scss/mixins.scss';
@import '@/common/scss/var.scss';
.mx-member-course-card{
	box-sizing: border-box;
	padding: 40rpx;
	width: 100%;
	border-radius: 5px;
	background-color: #fff;
	box-shadow: 0 0 5px 0 rgba($color: #000000, $alpha: .16);
	font-family: $font-family;
	margin-bottom: 36rpx;
	.course-title{
		font-size: 16px;
		font-weight: bold;
		color: $color-title;
	}
	.course-progress{
		margin-top: 40rpx;
	}
	.course-time{
		margin-top: 28rpx;
	}
	.course-location{
		margin-top: 28rpx;
	}
	.course-coach{
		margin-top: 34rpx;
		display: flex;
		align-items: center;
		&>text:first-child{
			width: 78px;
			margin-right: 32rpx;
		}
		
		.caochs{
			display: flex;
			flex-wrap: wrap;
			.caoch-info{
				margin-right: 24rpx;
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.caoch-img{
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
					@include bg-img-cover;
				}
				
				.caoch-name{
					margin-top: 6rpx;
					font-size: 14px;
					color: $color-title;
				}
			}
		}
		
		
	}
	
	.member-number{
		margin-top: 28rpx;
	}
}
</style>
